async function render() {
  const res = await axios.get("http://127.0.0.1:8848/api/students");
  const stuHtml = res.data
    .map((item) => {
      return `
        <div class="item">${item.name}-${item.count}</div>
    `;
    })
    .join("");
  document.querySelector(".left").innerHTML = stuHtml;
}
render();

async function getRes() {
  const res = await axios.get("http://127.0.0.1:8848/api/students");
  const arrName = res.data.map((item) => {
    return item.name;
  });
  const c = res.data.map((item) => {
    return item.count;
  });
  // console.log(c);
  var myChart = echarts.init(document.querySelector(".right"));
  const option = {
    xAxis: {
      type: "value",
    },
    yAxis: {
      type: "category",
      data: arrName,
      inverse: true,
    },
    tooltip: {},
    series: [
      {
        realtimeSort: true,
        data: c,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  };
  myChart.setOption(option);
}
getRes();
document.querySelector("button").addEventListener("click", async function () {
  const res = await axios.get("http://127.0.0.1:8848/api/lucystar");
  alert(`${res.data.name}同学被抽到了,目前被抽到了${res.data.count}`);
  render();
  getRes();
});
